<template>
    <a-modal
        v-model="visible"
        title="获取封面"
        :width="1000"
        size="small"
        @cancel="onCancel"
        :okText="step === 1 ? '保存' : '下一步'"
        cancelText="取消"
        class="ruleModal"
    >
        <div v-show="step === 1" class="title-p">
            <p>获取成功</p>
            <MyTable ref="myTableRef1" :dataProps="dataSucess" />
            <p class="p1">获取失败</p>
            <MyTable ref="myTableRef2" :dataProps="dataFail" />
        </div>
        <div v-if="step === 2">
            <step-2 ref="step2Ref" @setStep="setStep" />
        </div>
        <div v-if="step === 3">
            <step-3 ref="step3Ref" />
        </div>
        <a-button @click="bulkProcess" class="btn-panel" v-if="step === 1">批量处理</a-button>
        <template slot="footer">
            <a-button key="back" v-show="step > 0" @click="prevStep">
                {{ modal.leftText }}
            </a-button>
            <a-button key="submit" type="primary" v-show="step > 0" @click="nextStep">
                {{ modal.rightText }}
            </a-button>
        </template>
    </a-modal>
</template>

<script>
    import Step2 from './step2.vue'
    import Step3 from '../edit-title-modal/step3.vue'
    import MyTable from './my-table.vue'
    import { concat } from 'lodash'
    import { writeData } from '@/util/file-action'
    export default {
        name: 'RuleModal',
        components: { MyTable, Step2, Step3 },
        data() {
            return {
                visible: false,
                dataSucess: [],
                dataFail: [],
                step: 1,
                modal: {
                    rightText: '',
                    leftText: '',
                },
            }
        },
        watch: {
            visible(nval) {
                if (!nval) {
                    this.dataSucess = []
                    this.dataFail = []
                    setTimeout(() => {
                        this.step = 1
                    }, 500)
                }
            },
            step: {
                handler(nval) {
                    if (nval === 1) {
                        this.modal = {
                            rightText: '保存',
                            leftText: '取消',
                        }
                    } else if (nval === 2) {
                        this.modal = {
                            rightText: '运行规则',
                            leftText: '上一步',
                        }
                    } else if (nval === 3) {
                        this.modal = {
                            rightText: '保存',
                            leftText: '上一步',
                        }
                    }
                },
                immediate: true,
            },
        },
        methods: {
            afterClose() {
                this.step = 1
            },
            setVisible(val) {
                this.visible = val
                this.$nextTick(() => {
                    this.setData()
                })
            },
            setData() {
                const _dataSucess = []
                const _dataFail = []
                for (const val of this.$store.state.videos.videoList) {
                    val.cover && val.cover !== '' ? _dataSucess.push(val) : _dataFail.push(val)
                }
                this.dataSucess = _dataSucess
                this.dataFail = _dataFail
            },
            bulkProcess() {
                const selectedRows = concat(this.$refs.myTableRef1.selectedRows, this.$refs.myTableRef2.selectedRows)
                this.$store.commit('videos/setVideoTemp', selectedRows)
                this.step = 2
            },
            onCancel() {
                this.visible = false
            },
            prevStep() {
                if (this.step === 1) {
                    this.visible = false
                } else {
                    this.step = this.step - 1
                }
            },
            nextStep() {
                if (this.step === 1) {
                    // const data = concat(this.$refs.myTableRef1.data, this.$refs.myTableRef2.data)
                    // console.log(data)
                    // this.$store.commit('videos/setVideoList', data)
                    // this.visible = false
                    if (this.step === 1) {
                        const { videoList } = this.$store.state.videos
                        if (writeData(videoList, 'videos', 'video')) {
                            this.$emit('setVideoList', videoList)
                        }
                    }
                }
                if (this.step === 2) {
                    this.$refs.step2Ref.runRules()
                } else {
                    this.step = this.step + 1
                }
            },
            setStep(action) {
                this.step = this.step + (action == 'add' ? 1 : -1)
            },
        },
    }
</script>

<style lang="less" scoped>
    .title-p {
        .p1 {
            margin: 15px 0px;
        }
    }
    .btn-panel {
        margin: 15px 0px 0px 0px;
    }
</style>
